<template>
  <div class="createteam">
    <div class="content">
      <input type="text" v-model="groupname" @focus="nameHand" @blur="nameHandle" value="" placeholder="小组名称" />
      <div v-show="flag2" class="promptmsg">小组名称不能为空</div>
      <textarea id="groupcom" class="con" value="" cols="40" rows="4" placeholder="介绍一下你的小组吧~"></textarea>
      <div class="upload">
        <div class="upload-pic">
          <i class="icon iconfont">&#xe64b;</i>
          <p>添加头像</p>
        </div>
      </div>
    </div>
    <div class="label">
      <span class="label-name public-name">小组标签</span>
      <input id="grouplabel" type="text" value="" placeholder="多个标签用空格分隔，最多三个" />
    </div>
    <div class="contact clearfix">
      <div class="contact-name public-name">联系电话</div>
      <div class="contact-way">
        <input id="groupemile" class="frist" type="text" value="" placeholder="请输入邮箱地址" />
        <input id="groupqq" type="text" value="" placeholder="请输入QQ号码" />
      </div>
    </div>
    <div class="prompt">
      <p>请输入您的联系方式，以便我们和您取得联系</p>
    </div>
    <div class="submit" @click="submit">
      <span>提交申请</span>
    </div>
    <div class="footer">
      <i :class="{'selected':flag}" @click="clickBandle" class="icon iconfont">&#xe6c9;</i>
      <i :class="{'selected':flag1}" @click="clickBandle" class="icon iconfont">&#xe6c8;</i>
      我已经阅读并同意<span>蓝莓派小组服务协议</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CreateTeam',
  data() {
    return {
      flag:true,
      flag1:false,
      flag2:false,
      groupname:""
    }
  },
  methods: {
    submit(event){ 
      if(this.nameHandle() == true){
        alert("提交成功")
      }      
    },
    clickBandle(event) {
      this.flag = !this.flag;
      this.flag1 = !this.flag1;
    },
    nameHandle(event){
      if(this.groupname == ""){
        this.flag2 = true;
      }else if(this.groupname.length>0){ 
        return true
      }
    },
    nameHand(event){
      this.flag2 = false;
    }
  }
}

</script>
<style scoped>
.promptmsg{
  position: fixed;
  top: 0.76rem;
  left: 50%;
  transform: translate(-50%);
  color: #ff5555;
}
.createteam {
  font-size: 0.16rem;
  letter-spacing: 0.02rem;
}
.selected{
  display: none;
}
.content {
  padding: 0.15rem 0 0 0.15rem;
  background: #fff;
  margin-bottom: 0.12rem;
}

.content input {
  width: 100%;
  overflow: hidden;
  padding: 0 0 0.1rem 0;
  border-bottom: 0.01rem solid #E0E0E0;
}

.content .con {
  padding: 0.1rem 0 0 0;
}

.upload {
  margin-bottom: 0.15rem;
  display: inline-block;
  border: 0.01rem solid #E0E0E0;
}

.upload-pic {
  width: 1.2rem;
  height: 1.2rem;
  background: #F7F7F7;
  color: #E0E0E0;
  text-align: center;
}

.upload-pic i {
  line-height: 0.8rem;
  font-size: 0.6rem;
}

.upload-pic p {
  font-size: 0.18rem;
}

.label {
  margin: 0.12rem 0;
  background: #fff;
  padding: 0.15rem;
}

.public-name {
  color: #000;
  font-size: 0.17rem;
}

.label input {
  width: 70%;
  overflow: hidden;
  padding: 0 0 0 0.1rem;
}

.contact {
  background: #fff;
  padding: 0 0 0 0.15rem;
  position: relative;
}

.contact-name {
  width: 24%;
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
}

.contact-way {
  width: 74%
}

.contact>div {
  float: right;
}

.contact-way input {
  width: 100%;
  padding: 0.12rem 0;
}

.contact-way .frist {
  border-bottom: 0.01rem solid #E0E0E0;
}

.prompt {
  margin: 0.1rem 0.15rem 0.4rem 0.15rem;
  font-size: 0.14rem;
}

.submit {
  text-align: center;
}

.submit span {
  background: #F68344;
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 0.2rem;
}

.footer {
  text-align: center;
  font-size: 0.14rem;
  margin: 0.15rem 0 0.06rem 0;
  /* display: inline-block; */
}
.footer i{
  
}
.footer span {
  color: #0E9E56;
}

</style>
